import React, { Component } from 'react'
import PropTypes from 'prop-types'
import List from './List'
import Scrollbar from 'react-smooth-scrollbar'
import { connect } from 'react-redux'
import { addDragDrop } from '_redux/actions/dragDrops'
import Top from './Top'
import { updateLists, setLogger } from '_redux/actions/picture.js'
import { findlandLogList } from 'utils/Api'
import AddLogger from './AddLogger'
import AddVideoLogger from './AddVideoLogger'
class PictureList extends Component {
  constructor() {
    super()
    this.state = {
      show: false,
      logger: {},
      close: true,
      list: {}
    }
  }
  showList = (list) => {
    this.props.setLogger(list)
    if (list.type === '0') {
      this.props.addDragDrop({
        children: AddLogger,
        title: '编辑日志',
        id: 'editLogger',
        position: { x: -900 / 2, y: -350 / 2 }
      })
    } else if (list.type === '1') {
      this.props.addDragDrop({
        children: AddVideoLogger,
        title: '编辑日志',
        id: 'editVideoLogger',
        position: { x: -640 / 2, y: -350 / 2 }
      })
    }
  }
  componentDidMount() {
    this.getLists()
  }
  getLists = () => {
    const { feature } = this.props.feature
    if (!feature) {
      return
    }
    const id = feature.getId().replace('tb_farmland.', '')
    const seasonId = feature.get('season_id')

    const fd = new FormData()
    fd.append('pageNo', 1)
    fd.append('pageSize', -1)
    fd.append('landId', id)
    fd.append('seasonId', seasonId)
    findlandLogList(fd)
      .then(({ msg, result: { list = [] } }) => {
        if (msg === '200') {
          this.props.updateLists(list)
        }
      })
  }

  shouldComponentUpdate(nextProps) {
    const { feature } = nextProps.feature
    if (!feature.getId()) {
      return false
    }
    return true
  }
  componentDidUpdate(prevProps, prevState) {
    if (!prevProps.feature.feature.getId()) {
      if (!!this.props.feature.feature.getId()) {
        this.getLists()
      }
      return
    }
    if (this.props.feature.feature.getId().replace('tb_farmland.', '')
      !== prevProps.feature.feature.getId().replace('tb_farmland.', '')) {
      this.getLists()
    } else if (this.props.feature.id !== prevProps.feature.id) {
      this.getLists()
    }

  }
  destory = () => {
    this.setState({
      show: false
    })
  }
  closer = () => {
    this.setState({
      close: true
    })
  }
  show = (list) => {
    this.setState({
      close: false,
      list
    })
  }
  render() {
    const { picture: { lists } } = this.props
    return (
      <div className='lists'>
        {!this.state.close && <Top closer={this.closer} logger={this.state.list} />}
        <Scrollbar>
          <div className='listScroll'>
            {lists.sort((a, b) => (new Date(b.date)) - (new Date(a.date))).map(list =>
              <List key={list.id} list={list} showList={this.showList} show={this.show} />
            )}
          </div>
        </Scrollbar >
      </div>

    )
  }
}
PictureList.propTypes = {
  picture: PropTypes.object,
  showList: PropTypes.func,
  feature: PropTypes.object,
  updateLists: PropTypes.func,
  addDragDrop: PropTypes.func,
  setLogger: PropTypes.func,
}

const mapStateToProps = function (state) {
  return {
    picture: state.picture,
    feature: state.feature
  }
}
const mapDispatchToProps = function (dispatch) {
  return {
    showList: (show) => {
      dispatch(showList(show))
    },
    updateLists: (list, video) => {
      dispatch(updateLists(list, video))
    },
    addDragDrop: id => dispatch(addDragDrop(id)),
    setLogger: list => dispatch(setLogger(list))
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(PictureList)